<template>
  <div class="SetPayPwd" @click="FalsePwd">
    <div class="SetPayPwd-Title" id="tete">
      支付密码
    </div>
    <div class="SetPayPwd-Tips">
      设置支付密码,用于支付验证
    </div>
    <div class="SetPayPwd-Input" @click.stop="IptPwd">
      <PassWord ref='psd'></PassWord>
    </div>
    <div class="SetPayPwd-Btn">
      <button @click="Login()">完成</button>
    </div>
    <transition name="fade">
      <Message :mes="mes" :check='TdChecked' v-on:check="check1"></Message>
    </transition>
    <Key ref='Key'></Key>
  </div>


</template>

<script>
  import PassWord from '@/assets/assembly/PassWord'
  import Message from '@/assets/assembly/Message'
  import Key from '@/assets/assembly/Key';
  import {
    Indicator,
    Toast
  } from 'mint-ui';
  export default {
    name: 'SetPayPwd',
    data() {
      return {
        height: 0,
        Pwd: '',
        Stu: false,
        mes: '',
        TdChecked: false
      }
    },
    components: {
      PassWord,
      Message,
      Key
    },
    created: function () {
      this.$alloylever.config({
        cdn: '//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js', //vconsole的CDN地址
        reportUrl: "//a.qq.com", //错误上报地址
        reportPrefix: 'qun', //错误上报msg前缀，一般用于标识业务类型
        reportKey: 'msg', //错误上报msg前缀的key，用户上报系统接收存储msg
        otherReport: { //需要上报的其他信息
          uin: 491862102
        },
        entry: "#tete" //请点击这个DOM元素6次召唤vConsole。//你可以通过AlloyLever.entry('#entry2')设置多个机关入口召唤神龙
      })
    },
    methods: {
      Login: function () {
        var vm = this;
        if (this.$refs.psd.Pwd.length < 6) {
          this.mes = '请输入密码'
          this.TdChecked = true
        } else {
          var sessionId = sessionStorage.getItem('sessionId');
          Indicator.open({
            text: '设置中...',
          });
          this.$ApiCom.SetPwd(sessionId, this.$refs.psd.Pwd).then(function (res) {
            if (res.data.errCode == 1001) {
              // 登陆失效->sessionId与后台不匹配
              Indicator.open({
                text: '登陆失效...',
              });
              setTimeout(() => {
                Indicator.close();
                // 跳转登录页
                var Sid = localStorage.getItem('Sid');
                vm.$router.push({
                 path: `/Login`
                })
              }, 1000);
            } else if (res.data.errCode == 1002) {
              // 授权过期，重新发起授权
              Indicator.open({
                text: '授权失效...',
              });
              // 加密路径，回调路径
              var uri = encodeURIComponent(window.location.href);
              // 获取sessionId
              var sessionId = sessionStorage.getItem('sessionId');
              setTimeout(() => {
                Indicator.close();
                // 授权
                location.href = 'http://xyb.wujiaping.cn/parent/login/getWxInfo?redirectUri=' + uri + '&&sessionId=' + sessionId;
              }, 1000);
            } else {
              Indicator.open({
                text: '设置完成...',
              });
              var sessionId = sessionStorage.getItem('sessionId');
              localStorage.setItem('sessionId', sessionId);
              setTimeout(() => {
                vm.$router.push({
                  path: `/Index`
                })
              }, 1000);
            }

          }, function (err) {
            //   响应超时
            Indicator.close();
            Toast({
              message: '响应超时',
              duration: 1000
            });
          })
          // //跳转绑定银行卡
          // this.$router.push({
          // 	path: `/BindingCar`
          // })
        }

      },
      check1(e) {
        this.TdChecked = e
      },
      IptPwd() {
        this.HeightCheck = true;
        this.$refs.Key._data.BottomStu = this.HeightCheck;
      },
      FalsePwd() {
        this.HeightCheck = false;
        this.$refs.Key._data.BottomStu = this.HeightCheck;
      },
    }
  }

</script>

<style scoped>
  @import url("css/SetPayPwd.css");

</style>
